import React from 'react';
import { styled } from '@storybook/theming';
import { Button, styles } from '@storybook/design-system';
import CTA from './CTA';

const Wrapper = styled.div`
  padding: 40px 0;

  @media (min-width: ${styles.breakpoint + 1}px) {
    padding: 40px;
  }
`;

const ctaAction = <Button appearance="secondary">Get started</Button>;

export default {
  component: CTA,
  title: 'Composite/CTA',
  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
};

export function All(args) {
  return (
    <>
      <CTA text="Get started with our thing today!" {...args} />

      <CTA
        text="Get started with our really long thing that will potentially break lines today!"
        {...args}
      />
    </>
  );
}
All.args = {
  action: ctaAction,
};
